{{useCss "app-pages/css/goods_details.scss"}}
<div class="checkAdd {{checkAdd&&'focus'}}">
    {{#if loginer}}
        <div>成功添加商品</div>
        <div>
            <href to="cart.html"><button>转到购物车</button></href>
            <button event-click="{{'$Event.goods_details.checkAdd'}}">继续购物</button>
        </div>
    {{#else}}
        <div>您还未登陆</div>
        <div>
            <href to="sign_in.html"><button>去登陆</button></href>
            <button event-click="{{'$Event.goods_details.checkAdd'}}">取消</button>
        </div>
    {{/if}}
</div>
{{#if goods_detail}}
<div class="goods_details">
    {{#> "goodsimgview"}}
    <div class="goodsinfo">
        <div class="titlebar">
            商品信息
            <div class="i icon-weibo" event-click="{{'$Event.goods_details.shareToWeibo'}}"></div>
            <div class="i icon-qq" event-click="{{'$Event.goods_details.shareQzone'}}"></div>
        </div>
        <div class="sharebox">
            <div event-click="{{'$Event.goods_details.show_share_link'}}" class="title">点击{{$Cache.show_share_link&&"收起"||"查看"}}分享链接</div>
            <div class="sharelink {{$Cache.show_share_link&&'focus'}}">{{$Top.bus_info.info.domain_url}}/mobile.main.html#default/goods_details?id={{goods_detail._id}}&rcid={{loginer._id}}</div>
        </div>
        <hr />
        <div class="infobox">
            <div class="intro">
                {{goods_detail.intro||"暂无商品描述"}}
            </div>
        </div>
        <hr />
        <div class="saleinfo">
            <div class="item">库存：{{#if goods_detail.num==0}}缺货{{#else}}{{goods_detail.num}}{{/if}}</div>
            <div class="item">人气：{{$Cache.goods_details.hot_num}}</div>
        </div>
    </div>
    {{#if goods_detail.detail_content}}
    <div class="content">
        <div class="title">商品详情</div>
        {{HTML goods_detail.detail_content}}
    </div>
    {{/if}}
    <div class="bottomblock"></div>
    <div class="floatbtnbox">
        <div class="icon-{{$Cache.page_index&&'left-open-big'||'home'}}" event-click="{{'$Event.goods_details.detailGoBack'}}"></div>
        <href class="one">
            <span class="price">￥{{goods_detail.price_toFixed_2}}</span>
        </href>
        <href class="buy" event-click="{{'$Event.goods_details.goods.add_to_cart'}}" event-click-new="{{'$Event.goods_details.checkAdd'}}">
        <div class="icon-basket"></div>
        <div class="method">
        {{#if goods_detail.num }}
            加入购物车
        {{#else}}
            暂时缺货
        {{/if}}
        </div>
        </href>
    </div>
</div>
{{#else}}
<center style="
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
"><p style="
    margin-top: 50%;
"> 商品详情加载中 <br><span class="icon-spinner"></span></p></center>
{{/if}}

<xmp type="template" name="goodsimgview">
    <div class="goodsimg">
        <div class="bigbox">
            <div class="movebox">
                {{#each goods_detail.detail_img_urls}}
                <img class="bigimg" bind-src="{{$This}}?imageView/2/w/500" />
                {{/each}} 
            </div>
            <div class="pricebox">
                <div class="itemleft"></div>
                <div class="itemright">
                    <a event-click="{{'$Event.goods_details.goods.collect_toggle'}}" class="{{$Cache.goods_details.is_collect&&'icon-star'||'icon-star-empty'}}">{{$Cache.goods_detail.is_collect&&'已收藏'||'点击收藏'}}</a>
                </div>
            </div>
        </div>
        <div class="smallbox">
            {{#if goods_detail.detail_img_urls.length}} {{#each goods_detail.detail_img_urls }}
            <div class="smallitem">
            <img name="{{$Index}}" class="smallimg" bind-src="{{$This}}?imageView/2/h/50" />
            </div>
            {{/each}} {{#else}}此商品卖家没有上传图片{{/if}}
            
        </div>
    </div>
    <script type="text/vm">
        function(vm) {
            var movebox = vm.queryElement({
                className: "movebox"
            })[0];
            var smallbox = vm.queryElement({
                className: "smallbox"
            })[0];
            
            var $movebox = $(movebox);
            var $smallbox = $(smallbox);
            $smallbox.on("click", "img", function() {
                var w = $movebox.width();
                var $this=$(this);
                var _w=$this.width();
                var _h=$this.height();
                $movebox.stop().animate({
                    marginLeft: -w * $this.attr('name'),
                    height: w * (_h / _w)
                }, 150);
                document.body.scrollTop=0;
            });
        }
    </script>
</xmp>